<template>
  <view class="content mm">
    <view class="top"> </view>

    <view class="input">
      <view class="input_l">
        新密码
      </view>

      <m-input
        class="input_c"
        type="password"
        displayable
        v-model="password1"
        maxlength="16"
        placeholder="请设置新密码"
        @input="onKeyInput"
      ></m-input>

      <!-- <input type="password" placeholder="请设置新密码" class="input_c"/>
			<view class="input_r">
				<image src="../../static/img/ic_login_attention_forbid.png" ></image>
			</view> -->
    </view>
    <view class="input">
      <view class="input_l">
        确认新密码
      </view>

      <m-input
        class="input_c"
        type="password"
        displayable
        v-model="password2"
        maxlength="16"
        placeholder="请确认新密码"
        @input="onKeyInput"
      ></m-input>

      <!-- <input type="password" placeholder="请确认新密码" class="input_c"/>
			<view class="input_r">
				<image src="../../static/img/attention_fill.png" ></image>
			</view> -->
    </view>

    <view class="btn-row" :class="{ not: !canclick }">
      <view
        type="primary"
        class="bt primary"
        @tap="bindLogin"
        :loading="isLoading"
        >完成</view
      >
    </view>

    <!-- <button type="primary" class="bt" >完成</button> -->

    <view class="pop hide">
      <image src="../../static/img/ic_right.png"></image>
      <view class="pop_t">
        密码重置成功
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/common/request.js';
import service from '../../service.js';
import mInput from '../../components/m-input.vue';
let base64 = require('../../common/js/base64.js').Base64;

export default {
  components: {
    mInput,
  },
  data() {
    return {
      repeat_click: true,
      password1: '',
      password2: '',
      canclick: false,
      isLoading: false,
      yzm: '',
    };
  },
  onLoad(e) {
    this.yzm = e.yzm;
    console.log(this.yzm);
  },
  methods: {
    // 判断按钮高亮
    onKeyInput: function(event) {
      console.log(this.password1, this.password2);
      this.mparameterw = false;
      if (this.password1 != '' && this.password2) {
        this.canclick = true;
      } else {
        this.canclick = false;
      }
    },

    // 注册
    bindLogin() {
      //对象的方式创建
      var reg = new RegExp(/(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,16}$/);
      //字符串
      var str = this.password1;
      //调用方法验证字符串是否匹配
      var flag = reg.test(str);
      console.log(flag); //true

      if (!flag) {
        this.repeat_click = true;
        uni.showToast({
          icon: 'none',
          title: '密码为6-16个字符，且必须包含数字，字母，符号中的任意2种',
        });
        return;
      }

      if (this.password1 != this.password2) {
        this.repeat_click = true;
        uni.showToast({
          icon: 'none',
          title: '密码不一致请重新输入',
        });
        return;
      }

      this.isLoading = true;

      request({
        url: '/ucenter/forget',
        data: {
          // "type": 1,
          // "appId": "5efe4be4d9eff40a",
          // "terminal": "ANDROID",
          username: uni.getStorageSync('phone'),
          password: this.password1,
          verifyCode: uni.getStorageSync('yzm'),
          // "uuid": uni.getStorageSync("uuid")
        },

        method: 'PUT',
        success: openIdRes => {
          console.log(openIdRes);

          // 已经授权了、查询到用户的数据了
          if (openIdRes.data.code == '00000') {
            wx.showToast({
              title: '密码重置成功',
              icon: 'none',
              duration: 1500,
              success: function() {
                setTimeout(function() {
                  uni.navigateTo({
                    url: '../login/login',
                  });
                }, 1500);
              },
            });
          } else {
            // 验证码错误
            wx.showToast({
              title: openIdRes.data.msg,
              icon: 'none',
              duration: 1500,
              success: function() {
                setTimeout(function() {
                  uni.navigateTo({
                    url: '../pwd/pwd',
                  });
                }, 1500);
              },
            });

            // 					this.repeat_click = true;
            //uni.showToast({
            // 	title: openIdRes.data.msg,
            // 	icon: 'none'
            // });
            // this.isLoading = false;
          }
        },
        fail: () => {
          this.repeat_click = true;
          uni.showToast({
            title: '服务器开小差，请稍后~',
            icon: 'none',
          });
          return false;
        },
      });
    },
  },
};
</script>

<style>
.content {
  background: #f2f2f2;
}

.top {
  width: 100%;
  height: 20rpx;
  display: block;
  float: left;
  line-height: 36rpx;
  font-size: 28rpx;
  color: #888888;
  padding: 0rpx 0 0rpx 30rpx;
  border-bottom: 1px solid #dddddd;
}

.input {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  background: #ffffff;
  border-bottom: 1px solid #dddddd;
}

.input_l {
  width: 220rpx;
  height: 42rpx;
  display: block;
  float: left;
  margin: 24rpx 10rpx 24rpx 30rpx;
  font-size: 34rpx;
  color: #000000;
  line-height: 42rpx;
}

.input_c {
  width: 480rpx;
  height: 42rpx;
  display: block;
  float: left;
  margin: 24rpx 10rpx 0 0rpx;
  font-size: 32rpx;
  color: #000000;
  line-height: 42rpx;
}

.input_r {
  width: auto;
  height: 36rpx;
  display: block;
  float: right;
  margin: 27rpx 30rpx 0 0rpx;
  font-size: 32rpx;
  color: #256aff;
  line-height: 42rpx;
}

.bt {
  width: 690rpx;
  height: 94rpx;
  margin: 30rpx 0 0 30rpx;
  background: #256aff;
  border-radius: 10rpx;
  text-align: center;
  line-height: 94rpx;
  font-size: 36rpx;
  color: #ffffff;
  display: block;
  float: left;
  border: 0;
}

.bt:active {
  background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.199437),
      rgba(0, 0, 0, 0.199437)
    ),
    #256aff;
  border-radius: 8px;
}

.input_r image {
  width: 36rpx;
  height: 36rpx;
  display: block;
  float: left;
}

.pop {
  position: fixed;
  width: 220rpx;
  height: 180rpx;
  left: 265rpx;
  top: 524rpx;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10rpx;
  z-index: 99999;
}

.pop image {
  width: 72rpx;
  height: 72rpx;
  display: block;
  float: left;
  margin: 30rpx 74rpx 15rpx 74rpx;
}

.pop_t {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  text-align: center;
  font-size: 28rpx;
  color: #ffffff;
}

.not uni-button {
  opacity: 0.5;
}
</style>
